<template>
  <el-drawer v-model="open" :title="title" size="50%" @close="onClose">
    <el-descriptions :column="1" border>
      <el-descriptions-item :label="$t('merchant.name')">{{ form.merchantName }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.code')">{{ form.merchantCode }}</el-descriptions-item>
      <el-descriptions-item label="父级商户">{{ getParentMerchantName(form.parentCode) }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.contact')">{{ form.contact }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.phone')">{{ form.phone }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.channel')">{{ getChannelName(form.channelCode) }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.address')">{{ form.address }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.sortIndex')">{{ form.sortIndex }}</el-descriptions-item>
      <el-descriptions-item :label="$t('merchant.status')">
        <el-tag :type="form.status === 1 ? 'success' : 'info'">
          {{ form.status === 1 ? $t('jbx.text.enable') : $t('jbx.text.disable') }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('jbx.text.createdDate')">{{ parseTime(form.createTime) }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="onClose">{{ $t('jbx.text.close') }}</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { parseTime } from "@/utils/Jinbooks";
import { getMerchant } from "@/api/merchant/merchant";
import { listChannel } from "@/api/channel/channel";
import { listMerchant } from '@/api/merchant/merchant'

const { t } = useI18n();

const open = ref(false);
const form = ref({});
const channelOptions = ref([]);
const merchantOptions = ref([]);

const props = defineProps<{
  title?: string
  open?: boolean
  merchantId?: string
}>();

const emit = defineEmits(['update:open']);

// 获取渠道列表
const getChannelList = () => {
  listChannel({}).then((response: any) => {
    if (response.code === "0") {
      channelOptions.value = response.data.records
    }
  })
}

// 获取商户列表
const getMerchantList = () => {
  listMerchant({}).then((response: any) => {
    if (response.code === "0") {
      merchantOptions.value = response.data.records
    }
  })
}

// 获取渠道名称
const getChannelName = (channelCode: string) => {
  if (!channelCode) {
    return '无'
  }
  
  const channel = channelOptions.value.find((item: any) => item.channelCode === channelCode)
  return channel ? channel.channelName : '未知'
}

// 获取父级商户名称
const getParentMerchantName = (parentCode: string) => {
  if (!parentCode) {
    return '无'
  }
  
  const parent = merchantOptions.value.find((item: any) => item.merchantCode === parentCode)
  return parent ? parent.merchantName : '未知'
}

onMounted(() => {
  getChannelList()
  getMerchantList()
})

watch(
    () => props.open,
    (val) => {
      if (val) {
        open.value = val
        if (props.merchantId) {
          getMerchant(props.merchantId).then((response: any) => {
            form.value = response.data;
          });
        }
      } else {
        open.value = false;
      }
    },
    { immediate: true }
);

function onClose() {
  open.value = false;
  emit('update:open', false);
}
</script>